<template>
	<el-card shadow="hover" header="欢迎访问OZO-CLOUD" class="welcome">
		<div class="main">
			<div class="logo">
				<img src="img/logo.png">
			</div>
			<div class="time">
				<h1>{{ time }}</h1>
			</div>
		</div>
	</el-card>
</template>

<script>
export default {
	title: "欢迎",
	icon: "el-icon-flag",
	description: "欢迎组件",
	data() {
		return {
			time: ''
		}
	},
	mounted() {
		this.showTime()
		setInterval(() => {
			this.showTime()
		}, 1000)
	},
	methods: {
		showTime() {
			this.time = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
		}
	}
}
</script>

<style scoped>
.welcome {
	background: linear-gradient(to right, #8E54E9, #4776E6);
	color: #fff;
}

.main {
	display: flex;
}

.logo {
	height: 100px;
}

.time {
	padding-left: 50px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 22px;
}
</style>
